<!--
 * @Author: 471826078@qq.com
 * @Date: 2020-12-24 15:37:46
 * @LastEditors: younghxp
-->
<template>
  <div class="div">
    <div class="query">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form
          :inline="true"
          :model="filterField"
          ref="formData"
          :rules="rules"
        >
          <el-row>
            <el-col
              :span="18"
              style="line-height: 36px; font-size: 14px; color: #999"
            >
              <el-form-item label="">
                <timeSelection
                  @getStartTimeValue="getbeginDateStart"
                  :pickerOptions="pickerOptions"
                  @getEndTimeValue="getbeginDateEnd"
                ></timeSelection>
              </el-form-item>
              时段内各银行新增缴存金额、新增流水、新增代发等
              <!-- </el-col>
                        <el-col :span="6"> -->
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
              <!-- <el-button type="primary" icon="icon iconfont iconchazhao1" class="commonBtn" style="margin: 0 0 24px 15px" v-sdc @click="searchList"></el-button> -->
            </el-col>
          </el-row>
        </el-form>
      </el-row>
    </div>
    <div class="tableBox">
      <el-row class="tableBoxTip">
        <el-col :span="8" style="text-align: left">
          <el-button
            class="commonBut saveBtn funComBut"
            icon="icon iconfont icondaochu"
            @click="toExportExcel"
          >
            <span class="opetareText">导出报表</span>
          </el-button>
        </el-col>
      </el-row>
      <el-table
        :data="tableList"
        v-loading="loading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        style="border: 1px solid #dfe6ec"
        :max-height="tableHeight"
        @sort-change="sortChange"
      >
        <my-column
          v-for="(item, index) in tableCol"
          :sortable="
            ['inTotal', 'outTotal', 'salaryTotal', 'peopleCount'].includes(
              item.prop
            )
              ? 'custom'
              : false
          "
          :key="index"
          :col="item"
        ></my-column>
        <!-- <my-column v-for="(item,index) in tableCol"
                     :key="index" :col="item"></my-column> -->
      </el-table>
    </div>
  </div>
</template>
<script>
import MyColumn from './MyColumn'
import common from '../../kits/common'

export default {
  components: { MyColumn },
  name: 'dfTime',
  data() {
    return {
      tableHeight: null,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7 //如果没有后面的-8.64e7就是不可以选择今天的
        },
      },
      requestUrl: '/api-s/cs/cqstats/base/banktotal',
      filterField: {
        monthsStart: '', //monthsStart
        monthsEnd: '', //monthsEnd
      },
      tableList: [],
      tableCol: [
        {
          id: 'B7AD9F3DB57E3179E05500001212',
          isShow: true,
          label: '银行',
          prop: 'bankName',
        },
        {
          id: 'B7AD9F3DB57E3179E0550000012332',
          isShow: true,
          label: '时段内专户缴存总金额(万元)',
          prop: 'inTotal',
        },
        {
          id: 'B7AD9F3DB57E3179E0550000004444',
          isShow: true,
          label: '时段内专户支出总金额(万元)',
          prop: 'outTotal',
        },
        {
          id: 'B7AD9F3DB57E3179E055000000555',
          isShow: true,
          label: '时段内代发总金额(万元)',
          prop: 'salaryTotal',
        },
        {
          id: 'B7AD9F3DB57E3179E0550000006666',
          isShow: true,
          label: '时段内代发总人次',
          prop: 'peopleCount',
        },
      ],
    }
  },
  mounted() {
    this.$nextTick(function () {
      this.loadTableData()
      this.tableHeight = window.innerHeight - 300
      // 监听窗口大小变化
      let self = this
      window.onresize = function () {
        self.tableHeight = window.innerHeight - 300
      }
    })
  },
  methods: {
    //获取开工日期
    getbeginDateStart(val) {
      this.filterField.monthsStart = val
    },
    getbeginDateEnd(val) {
      this.filterField.monthsEnd = val
    },
    searchList() {
      this.$nextTick(function () {
        this.loadTableData()
      })
    },
    loadTableData() {
      this.axios
        .post('/api-s/cs/cqstats/base/banktotal', this.filterField)
        .then((res) => {
          if (!res.data.hasError) {
            this.tableList = res.data.result
            this.loading = false
            if (this.tableList.length < 1) {
              this.isEmpty = true
            }
          } else {
            this.isEmpty = true
            this.tableList = []
          }
        })
    },
    //导出报表
    toExportExcel() {
      if (this.tableList.length == 0) {
        this.$message({
          type: 'warning',
          message: '无数据可导出',
        })
        return false
      }
      window.location.href =
        common.commonApi +
        'api-s/cs/cqstats/base/bankexport' +
        '?monthsStart=' +
        this.filterField.monthsStart +
        '&monthsEnd=' +
        this.filterField.monthsEnd +
        '&fields=' +
        'bankName,inTotal,outTotal,salaryTotal,peopleCount' +
        '&sort=' +
        this.filterField.sort +
        '&sortField=' +
        this.filterField.sortField +
        '&access_token=' +
        localStorage.getItem('access_token')
    },
  },
}
</script>
<style lang="less" scoped>
@import '../../../static/css/filterArea.less';
.mainCon {
  padding: 0;
  top: 130px;
}
.tableBox {
  padding: 0 24px;

  &Tip {
    height: 68px;
    line-height: 36px;
    font-size: 14px;
    color: #666;
    padding: 16px 0;
    .el-col {
      height: 36px;
      line-height: 36px;
    }
    .colSetupBtn {
      display: inline-block;
      vertical-align: top;
    }
  }
}
.tablePage {
  padding: 0 24px;
}
.query {
  padding: 0 24px;
  border-bottom: 10px solid #f5f7fa;
}
</style>
